<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小智 WebSocket 实时聊天室 - 支持多人在线聊天、私聊、文件分享等功能">
    <meta name="keywords" content="WebSocket,聊天室,实时通信,Node.js">
    <title>小智 WebSocket 聊天室</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💬</text></svg>">
</head>
<body>
    <!-- 页面加载动画 -->
    <div id="loading" class="loading-overlay">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>正在连接服务器...</p>
        </div>
    </div>

    <!-- 主应用容器 -->
    <div id="app" class="app-container" style="display: none;">
        <!-- 头部导航 -->
        <header class="app-header">
            <div class="header-content">
                <h1 class="app-title">
                    <span class="logo">💬</span>
                    小智聊天室
                </h1>
                <div class="header-controls">
                    <div class="connection-status" id="connectionStatus">
                        <span class="status-indicator offline"></span>
                        <span class="status-text">离线</span>
                    </div>
                    <div class="online-counter" id="onlineCounter">
                        <span class="counter-icon">👥</span>
                        <span class="counter-text">0 人在线</span>
                    </div>
                    <button class="settings-btn" id="settingsBtn" title="设置">
                        <span>⚙️</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="app-main">
            <!-- 侧边栏 -->
            <aside class="sidebar" id="sidebar">
                <div class="sidebar-header">
                    <h3>在线用户</h3>
                    <button class="sidebar-toggle" id="sidebarToggle">
                        <span>👁️</span>
                    </button>
                </div>
                <div class="user-list" id="userList">
                    <div class="user-list-empty">
                        <p>暂无在线用户</p>
                    </div>
                </div>
            </aside>

            <!-- 聊天区域 -->
            <section class="chat-container">
                <div class="chat-messages" id="chatMessages">
                    <div class="welcome-message">
                        <div class="welcome-content">
                            <h2>🎉 欢迎来到小智聊天室！</h2>
                            <p>在这里你可以：</p>
                            <ul>
                                <li>📢 与所有人聊天</li>
                                <li>📩 发送私聊消息</li>
                                <li>👥 查看在线用户</li>
                                <li>🎨 使用表情符号</li>
                            </ul>
                            <p class="welcome-tip">请先输入你的昵称开始聊天 👇</p>
                        </div>
                    </div>
                </div>
                
                <!-- 消息输入区域 -->
                <div class="message-input-container">
                    <div class="message-input-toolbar">
                        <button class="toolbar-btn" id="emojiBtn" title="表情">😊</button>
                        <button class="toolbar-btn" id="imageBtn" title="图片">🖼️</button>
                        <button class="toolbar-btn" id="fileBtn" title="文件">📎</button>
                    </div>
                    <div class="message-input-area">
                        <input type="text" 
                               id="messageInput" 
                               placeholder="输入消息..." 
                               maxlength="1000"
                               disabled>
                        <button class="send-btn" id="sendBtn" disabled>
                            <span>发送</span>
                        </button>
                    </div>
                    <div class="input-status">
                        <span class="char-counter" id="charCounter">0/1000</span>
                        <span class="typing-indicator" id="typingIndicator"></span>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 用户信息模态框 -->
    <div id="userModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h3>加入聊天室</h3>
                <button class="modal-close" id="userModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <div class="form-group">
                        <label for="nickname">昵称 *</label>
                        <input type="text" 
                               id="nickname" 
                               name="nickname" 
                               placeholder="请输入昵称（2-20字符）" 
                               maxlength="20" 
                               required>
                        <div class="form-help">只能包含字母、数字、中文、下划线和横线</div>
                    </div>
                    <div class="form-group">
                        <label for="avatar">头像</label>
                        <div class="avatar-selector" id="avatarSelector">
                            <div class="avatar-option active" data-avatar="👤">👤</div>
                            <div class="avatar-option" data-avatar="😊">😊</div>
                            <div class="avatar-option" data-avatar="🤖">🤖</div>
                            <div class="avatar-option" data-avatar="👨‍💻">👨‍💻</div>
                            <div class="avatar-option" data-avatar="👩‍💻">👩‍💻</div>
                            <div class="avatar-option" data-avatar="🎭">🎭</div>
                            <div class="avatar-option" data-avatar="🦄">🦄</div>
                            <div class="avatar-option" data-avatar="🐱">🐱</div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" form="userForm" class="btn-primary" id="joinBtn">
                    加入聊天室
                </button>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div id="settingsModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h3>设置</h3>
                <button class="modal-close" id="settingsModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <div class="settings-section">
                    <h4>显示设置</h4>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="darkMode"> 暗黑模式
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="showTimestamp" checked> 显示时间戳
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="showAvatar" checked> 显示头像
                        </label>
                    </div>
                </div>
                
                <div class="settings-section">
                    <h4>通知设置</h4>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="soundNotification" checked> 声音通知
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="desktopNotification"> 桌面通知
                        </label>
                    </div>
                </div>

                <div class="settings-section">
                    <h4>聊天设置</h4>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="enterToSend" checked> 回车发送消息
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="autoScroll" checked> 自动滚动到底部
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" id="resetSettings">恢复默认</button>
                <button class="btn-primary" id="saveSettings">保存设置</button>
            </div>
        </div>
    </div>

    <!-- 私聊模态框 -->
    <div id="privateChatModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="privateChatTitle">私聊</h3>
                <button class="modal-close" id="privateChatClose">&times;</button>
            </div>
            <div class="modal-body">
                <div class="private-messages" id="privateMessages">
                    <!-- 私聊消息将在这里显示 -->
                </div>
                <div class="private-input">
                    <input type="text" 
                           id="privateMessageInput" 
                           placeholder="输入私聊消息..." 
                           maxlength="1000">
                    <button class="send-btn" id="privateSendBtn">发送</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 表情选择器 -->
    <div id="emojiPicker" class="emoji-picker">
        <div class="emoji-categories">
            <button class="emoji-category active" data-category="faces">😊</button>
            <button class="emoji-category" data-category="people">👨</button>
            <button class="emoji-category" data-category="nature">🌈</button>
            <button class="emoji-category" data-category="objects">🎭</button>
            <button class="emoji-category" data-category="symbols">❤️</button>
        </div>
        <div class="emoji-grid" id="emojiGrid">
            <!-- 表情将由JavaScript动态填充 -->
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notifications" class="notifications-container">
        <!-- 通知消息将在这里显示 -->
    </div>

    <!-- 右键菜单 -->
    <div id="contextMenu" class="context-menu">
        <div class="context-menu-item" data-action="reply">回复</div>
        <div class="context-menu-item" data-action="private">私聊</div>
        <div class="context-menu-item" data-action="copy">复制消息</div>
        <div class="context-menu-separator"></div>
        <div class="context-menu-item" data-action="report">举报</div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="errorModal" class="modal-overlay error-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>⚠️ 连接错误</h3>
            </div>
            <div class="modal-body">
                <p id="errorMessage">无法连接到服务器，请检查网络连接。</p>
                <div class="error-actions">
                    <button class="btn-primary" id="retryConnection">重试连接</button>
                    <button class="btn-secondary" id="refreshPage">刷新页面</button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript文件 -->
    <script src="js/config.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/websocket-client.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/app.js"></script>
</body>
</html>